<template>
  <div class="dragConfig">
    <div class="dragableTit">
      <div class="sidebarTit">拖拽元素</div>
      <div class="canvasTit">
        画布
        <div class="zoomVal">
          <a-switch v-model:checked="isGrid" size="small" /><span>开启网格</span>
        </div>
      </div>
      <div class="configTit">配置</div>
    </div>
    <div class="dragable">
      <div :class="['sidebar', !stionConfigState.isEditDrag ? 'disabled' : '']">
        <DraggableElement
          v-for="(item, index) in draggableEl"
          :key="index"
          :itemData="item"
          @click="handleClickDraggableEl(item)"
        />
        <div class="sideBarBg" v-if="!stionConfigState.isEditDrag" />
      </div>

      <!-- !stionConfigState.isEditDrag ? 'disabled' : '', -->
      <div :class="['canvasOutContent']">
        <DrawingCanvas
          ref="canvasOutContent"
          :rowData="enhancedRowData"
          :topologyMap="topologyMap"
          :disabled="!stionConfigState.isEditDrag"
          :isGrid="isGrid"
          @handleSaveDragConfig="handleSaveDragConfig"
          @getElements="getElements"
        />
      </div>
      <div ref="configContent" class="configContent">
        <DraggableConfig
          @handleSaveConfig="handleSaveConfig"
          :rowData="enhancedRowData"
          :addStationId="addStationId"
          :elements="elements"
          :draggableEl="draggableEl"
        />
      </div>
    </div>
  </div>
</template>
<script setup>

import DraggableElement from "./DraggableElement.vue";
import DrawingCanvas from "./DrawingCanvas.vue";
import DraggableConfig from "./DraggableConfig.vue";
import { useStionConfigStore } from "@/stores/stationConfig";
import {
  EQUIP_TYPE,
} from "@/constants/stationConfig";
import chongDianZhuang from "@/assets/drag/chongDianZhuang.png";
const $api = inject("$api");
const { stionConfigState, changeDraggableElment } = useStionConfigStore();
const emits = defineEmits(["validateDragPass"]);
const props = defineProps({
  topologyMap: {
    type: Object,
  },
  rowData: {
    type: Object,
  },
  addStationId: {
    type: String,
  },
});
const draggableEl = ref([]);
const isGrid = ref(true); // 默认开启网格
const disabled = computed(() => {
  return (
    !stionConfigState.configData.systemId &&
    stionConfigState.configData.assetCode
  );
});
const canvasOutContent = ref(null);
const handleClickDraggableEl = (item) => {
  // changeEquipType(item.type);
};
const handleSaveConfig = () => {
  canvasOutContent.value.handleSaveDragConfig();
};
const handleSaveDragConfig = () => {};
const elements = ref([]);
const getElements = (data) => {
  elements.value = data;
  emits("getElements", data);
};
const enhancedRowData = computed(() => {
  return {
    ...props.rowData,
    stationId: props.rowData.stationId || props.addStationId
  };
});
const modelGraphList = async () => {
  const res = await $api.modelGraphList({
    equipModelId: props.rowData.equipModelId
  });
  if (res.code === 0) {
    const iconFileIds = res.data.map((item) => item.iconFileId);
    const urlRes = await $api.fileFindByIds(iconFileIds);
    const prefixData = res.data.map((item) => {
      return {
        ...item,
        url: urlRes.data.find((i) => i.id === item.iconFileId)?.url,
      };
    });
    prefixData.unshift({
      modelType: EQUIP_TYPE.LINE,
      category: 1,
      url: "1",
      deviceName: "线",
    },
    // {
    //   modelType: EQUIP_TYPE.CHONG_DIAN_ZHUANG,
    //   category: 1,
    //   url: chongDianZhuang,
    //   deviceName: "充电桩",
    // }
  );
    draggableEl.value = prefixData;
    changeDraggableElment(prefixData);
  }
};
onMounted(() => {
  modelGraphList();
});
</script>

<style>
</style>
<style lang="less" scoped>
.dragable {
  display: flex;
}
.dragableTit {
  display: flex;
  text-align: center;
  margin-top: 30px;
  .sidebarTit {
    width: 85px;
    margin: 0 20px 0 0;
  }
  .canvasTit {
    width: calc(100% - 250px);
    position: relative;
  }
  .configTit {
    width: 220px;
    margin: 0 0 0 20px;
  }
}
.sidebar {
  width: 90px;
  border: 1px solid #ccc;
  padding: 15px;
  text-align: center;
  margin: 15px 20px 0 0;
  position: relative;
  height: 760px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  .sidebarTitle {
    position: absolute;
    top: -28px;
    left: 5px;
    color: #fff;
  }
  .sideBarBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #999;
    opacity: 0.5;
    cursor: no-drop;
  }
}

.canvasOutContent {
  width: calc(100% - 250px);
  height: 760px;
  border: 1px solid #ccc;
  overflow: auto;
  margin-top: 15px;
  position: relative;
}
.configContent {
  width: 220px;
  border: 1px solid #ccc;
  padding: 15px;
  text-align: center;
  margin: 15px 0 0 20px;
  height: 760px;
  overflow-y: scroll;
}
.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.dragConfig {
  position: relative;
  width: 100%;
  height: 100%;
}
.zoomVal {
  position: absolute;
  right: 5px;
  bottom: -5px;
  font-size: 12px;
  span{
    display: inline-block;
    margin-left:5px;
    vertical-align: text-top;
  }
}
</style>